<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>用户评价</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
    <link type="text/css" rel="stylesheet" media="screen" href="__PUBLIC__/app/css/style.css"/>
    <link type="text/css" rel="stylesheet" media="screen" href="__PUBLIC__/app/css/media.css"/>
    <style type="text/css">
	.inner{margin-bottom: 0px;}
		
	*{
	    margin: 0;
	    padding:0;
	    -webkit-tap-highlight-color:rgba(0,0,0,0);
	    -webkit-text-size-adjust:none;
	}
	html{
	    font-size:10px;
	}
	body{
	    background-color: #efefef;
	    font-size: 1.2em;
	}
		
	</style>
</head>
<body style="background:#efefef;">
	<include file="Public/customHeader" title="用户评价" url="javascript:history.go(-1);"/>
	<section class="mrs_detailsec pinjia">
		<ul class="ul_new mry_new">
  			<li data-ajaxify="{:U('/Comments/ajaxLoadComments')}" class="on"><a href="javascript:;">全部({$allComment})</a></li>
  			<li data-ajaxify="{:U('/Comments/ajaxLoadComments/type/good')}"><a href="javascript:;">好评({$goodComment})</a></li>
  			<div class="huiline"></div>
		</ul>
	</section>
	<div class="tab">
        <div class="tab_box box_two lists" style="background:#efefef;">
        	<if condition="$comments">
        	<foreach name="comments" item="comment">
        		<div class="mry_two mry_pj">
			        <div class="mar_two_main">
			        	<if condition="!$comment['user_info']['headerimg']">
			            <img src="__PUBLIC__/app/images/mrydetail_05.png">
			            <else />
			            <img src="{$comment['user_info']['headerimg']}">
			           </if>
			            <ul>
			               <li>
			               <span>{$comment.user_info.mobile|hidden_phone_word=###}</span>
			               <label>满意度：<for start="0" end="$comment['start']"><i></i></for>
			               </label>
			               </li>
			               <li><p>{$comment.content}</p></li>
			            </ul>
			        </div>
			        <if condition="$comment['photos']">
			        <div class="pic_pin">
			        	<a href="{:U('/Comments/commentDetail/id/'.$comment['id'])}">
			             <ul>
			             	<foreach name="comment.photos" item="photo">
			                <li><img src="__UPLOADS__/Comment/{$photo.upload_number}/{$photo.img_name}"></li>
			                </foreach>
			             </ul>
			            </a>
			        </div>
			        </if>
			        <dd>{$comment.createtime|date="Y-m-d H:i:s",###}</dd>
			     </div>
			     <if condition="$comment['reply']">
			      <div class="mrs_addpj">
                      <div class="mrs_pjmain">
                    	<if condition="$comment['reply']['beautician']['profile_img']">
			           	<img src="__UPLOADS__/Profile/{$comment['reply']['beautician']['profile_img']}">
		            	<else />
		            	<img src="__PUBLIC__/app/images/defaultProfile.png">
		            	</if>
                        <span>{$comment.reply.beautician.name}</span>
                      </div>
                      <p><span>回复：</span>{$comment.reply.content}</p>
                      <if condition="$comment['reply']['photos']">
			          <div class="pic_pin">
			          	<a href="{:U('/Comments/commentDetail/id/'.$comment['reply']['id'])}">
				            <ul>
				            	<foreach name="comment.reply.photos" item="photo">
				                <li><img src="__UPLOADS__/Comment/{$photo.upload_number}/{$photo.img_name}"></li>
				                </foreach>
				            </ul>
			          	</a>
			          </div>
			          </if>
                      <dd>{$comment.reply.createtime|date="Y-m-d H:i:s",###}</dd>
        		</div>
     			</if>
        	</foreach>
        	<else/>
        	<div class="no_bank"><h1>美滴滴</h1><p>没有评论内容~</p></div>
        	</if>
        </div>
        <div class="tab_box lists" style="display:none; background:#efefef;" ></div>
    </div>
	<script src="__FONT__/js/zepto.min.js"></script>
    <script type="text/javascript" src="__FONT__/js/mustache.js"></script>
    <script type="text/javascript">
    var id = '{$id}',
    	itemTemplete = '<div class="mry_two mry_pj">'
	         +'<div class="mar_two_main">'
	         +'{{^userHasProfile}}<img src="__PUBLIC__/app/images/mrydetail_05.png">'
	         +'{{/userHasProfile}}{{#userHasProfile}}'
	         +'<img src="{{user_info.headerimg}}">{{/userHasProfile}}'
	         +'<ul>'
	         +'<li><span>{{user_info.mobile}}</span><label>满意度：{{{startHtml}}}</label></li>'
       		+'<li><p>{{content}}</p></li>'
       		+'</ul>'
       		+'</div>'
       		+'{{#hasPhoto}}'
       		+'<div class="pic_pin"><a href="{:U(\'/Comments/commentDetail\')}?id={{id}}">'
       		+'<ul>'
       		+'{{#photos}}'
       		+'<li><img src="__UPLOADS__/Comment/{{upload_number}}/{{img_name}}"></li>'
       		+'{{/photos}}'
       		+'</ul>'
       		+'</a></div>{{/hasPhoto}}'
       		+'<dd class="timeago" title="create_time">{{commentTime}}</dd></div>{{#hasReply}}'
       		+'<div class="mrs_addpj">'
    	  		+'<div class="mrs_pjmain">'
                 	+'<img src="{{#beauticianHasProfile}}__UPLOADS__/Profile/{{reply.beautician.profile_img}}{{/beauticianHasProfile}}{{^beauticianHasProfile}}__PUBLIC__/app/images/defaultProfile.png{{/beauticianHasProfile}}">'
    	              +'<span>{{reply.beautician.name}}</span>'
    	          +'</div>'
    	          +'<p><span>回复：</span>{{reply.content}}</p>'
    	          +'{{#hasReplyPhoto}}'
    	          +'<div class="pic_pin"><a href="{:U(\'/Comments/commentDetail\')}?id={{comment.reply.id}}">'
    	            +'<ul>'
    	            	+'{{#reply.photos}}'
    	                +'<li><img src="__UPLOADS__/Comment/{{upload_number}}/{{img_name}}"></li>'
    	                +'{{/reply.photos}}'
    	            +'</ul>'
    	          +'</a></div>'
    	          +'{{/hasReplyPhoto}}'
    	      +'<dd>{{reply.replyTime}}</dd></div>'
       		+'{{/hasReply}}';
       		
       		
    $(function() {
	    tab(".ul_new li", ".tab_box", 1)
	})

	function tab(a, b, c) {
	    if (c == 1) {
	        $(a).click(function() {
	            var _this = $(this);
			   	var index = $(_this).index();

			   	var container = $(b).eq(index);
			   	var hasData = container.find('.mry_two').length;
			   	if (!hasData) {
				   $.ajax({
					   url: $(this).attr('data-ajaxify'),
					   data: {id: id},
					   dataType: 'json',
					   success: function (result) {
						   if (result.status == 1) {
								$(_this).addClass("on").siblings().removeClass("on");
							   	$(b).hide();
							   	
							   	if ($.isEmptyObject(result.data)) {
							   		container.html('<div class="no_bank"><h1>美滴滴</h1><p>没有评论内容~</p></div>');
							   	} else {
								   	var html = '';
								   	var data = result.data;
								   	
								   	for (var i in data) {
								   		var comment = data[i];
								   		
								   		var startHtml = '';
				  						var start = Math.floor(parseFloat(comment.avg_score));
				  						for (var j = 0 ; j < 5; j++) {
				  							if (start > j) {
				  								startHtml += '<i></i>';
				  							}
				  						}
				  						
				  						comment.startHtml = startHtml;
								   		comment.userHasProfile = function () {
								   			if (typeof comment.user_info == 'undefined') {
								   				return false;
								   			}
								   			
								   			return $.trim(comment.user_info.headerimg) != '';
								   		}
								   		
								   		comment.hasPhoto = function () {
								   			if (typeof comment.photos == 'undefined') {
								   				return false;
								   			}
								   			
								   			return comment.photos.length != 0;
								   		}
								   		
								   		if (typeof comment.reply != 'undefined') {
								   			comment.hasReply = true;
								   			
								   			comment.beauticianHasProfile = function () {
								   				return $.trim(comment.reply.beautician.profile_img) != '';
								   			}
								   			
								   			comment.reply.hasReplyPhoto = typeof comment.reply.photos != 'undefined';
								   		}
								   		
								   		html += Mustache.render(itemTemplete, comment);
								   	}
								   	
								   	var commentDom = $(html);
								   	container.append(commentDom);
							   	}
							   	container.show();
							   	
							   	if (result.hasMore) {
							   		hasMoreGoodComment = true;
							   		goodCommentNextPage = result.nextPage;
							   	} else {
							   		hasMoreGoodComment = false;
							   		goodCommentNextPage = false;
							   	}
						   }
					   }
				   });
			   } else {
				 	$(_this).addClass("on").siblings().removeClass("on");
				  	$(b).hide();
				  	container.show();
			   }
	        })
	    } else {
	        $(a).hover(function() {
	            var index = $(this).index();
	            $(this).addClass("on").siblings().removeClass("on");
	            $(b).hide();
	            $(b).eq(index).show();
	        })
	    }
	}
	</script>
    <script>
    var hasMoreComment = false,
    	hasMoreGoodComment = false,
    	commentNextPage = '{$nextPage}',
    	goodCommentNextPage;
    $(function () {
		$('.loadMore').click(function () {
			var index = $('.ul_new li.on').index();
		    	hasMore = index == 0?hasMoreComment:hasMoreGoodComment;
		    	nextPage = index == 0?commentNextPage:goodCommentNextPage;
		    	if (!hasMore) {
		    		$('.dropload-down div.dropload-load').empty().append('没有更多数据了!');
		    		 setTimeout(function(){
		    			me.resetload();
		    		 }, 1000);
		    		return false;
		    	}
		    	
		        $.ajax({
		            type: 'GET',
		            url: nextPage,
		            dataType: 'json',
		            success: function(result){
		            	if (result.status == 1) {
		            		var itemHtml = '';
		            		if (!$.isEmptyObject(result.data)) {
		            			data = result.data;
		            			for(var i in data){
		            				var comment = data[i];
							   		
							   		var startHtml = '';
			  						var start = Math.floor(parseFloat(comment.avg_score));
			  						for (var j = 0 ; j < 5; j++) {
			  							if (start > j) {
			  								startHtml += '<i></i>';
			  							} else {
			  								startHtml += '<i class="nonei"></i>';
			  							}
			  						}
			  						
			  						comment.startHtml = startHtml;
							   		comment.userHasProfile = function () {
							   			if (typeof comment.user_info == 'undefined') {
							   				return false;
							   			}
							   			
							   			return $.trim(comment.user_info.headerimg) != '';
							   		}
							   		
							   		comment.hasPhoto = function () {
							   			if (typeof comment.photos == 'undefined') {
							   				return false;
							   			}
							   			
							   			return comment.photos.length != 0;
							   		}
							   		
							   		if (typeof comment.reply != 'undefined') {
							   			comment.hasReply = true;
							   			
							   			comment.reply.beauticianHasProfile = function () {
							   				return $.trim(comment.reply.beautician.profile) != '';
							   			}
							   			
							   			comment.reply.hasPhoto = typeof comment.reply.photos != 'undefined';
							   		}
		            				
		            				itemHtml += Mustache.render(itemTemplete, comment);
					      		}
		            		}
			               
		            		itemHtmlObj = $(itemHtml);
			                // 为了测试，延迟1秒加载
			                setTimeout(function(){
			                    $('.tab_box').eq(index).append(itemHtmlObj);
			                    me.resetload();
			                },1000);
			                
			                if (result.hasMore) {
			                	if (index == 0) {
			                		commentNextPage = result.nextPage;
			                	} else {
			                		goodCommentNextPage = result.nextPage;
			                	}
			                } else {
			                	hasMore = false;
			                	if (index == 0) {
			                		hasMoreComment = false;
			                	} else {
			                		hasMoreGoodComment = false;
			                	}
			                }
		            	}
		            },
		            error: function(xhr, type){
		                me.resetload();
		            }
		        });
		});
	});
    </script>
    <if condition="$hasMore">
   	<script>hasMoreComment = true;</script>
    </if>
</body>
</html>